<template>
  <div class="diff-container">
    <div class="input-section">
      <input 
        v-model="commitMessage" 
        placeholder="输入git commit message"
        @keyup.enter="fetchDiff"
      />
      <button @click="fetchDiff">查询</button>
    </div>
    
    <div v-if="diffData" class="diff-viewer" v-html="diffData.diffHtml"></div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import simpleGit from 'simple-git'
// 替换原来的导入方式
import { html as Diff2Html } from 'diff2html'

const commitMessage = ref('')
const diffData = ref(null)

const leftContent = computed(() => {
  if (!diffData.value) return ''
  return highlightDiff(diffData.value, 'old')
})

const rightContent = computed(() => {
  if (!diffData.value) return ''
  return highlightDiff(diffData.value, 'new')
})

async function fetchDiff() {
  try {
    const git = simpleGit()
    const log = await git.log({ '--grep': commitMessage.value })
    
    if (!log.total) {
      alert('未找到匹配的commit')
      return
    }
    
    const commitHash = log.latest.hash
    const diff = await git.diff([commitHash + '^!'])
    
    // 使用方式保持不变
    const diffHtml = Diff2Html(diff, {
      drawFileList: false,
      matching: 'lines',
      outputFormat: 'side-by-side'
    })
    
    diffData.value = {
      diffHtml,
      commitHash
    }
  } catch (error) {
    console.error('获取差异失败:', error)
    alert('获取差异失败: ' + error.message)
  }
}

function highlightDiff(diffData, side) {
  return diffData.diffHtml
}
</script>

<style scoped>
.diff-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.input-section {
  margin-bottom: 20px;
}

input {
  padding: 8px;
  width: 300px;
  margin-right: 10px;
}

button {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.diff-viewer {
  display: flex;
  gap: 20px;
}

.diff-side {
  flex: 1;
  border: 1px solid #ddd;
  padding: 10px;
  overflow: auto;
}

pre {
  margin: 0;
  white-space: pre-wrap;
}
</style>